<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-08-26 14:48:58
 * @Description:
-->
<template>



  <div v-if="column.display">
    <van-field
      :name="column.prop"
      :label="column.label"
      :placeholder="
        column.placeholder ? column.placeholder : '请输入' + column.label"
      :readonly="column.readonly"
      :disabled="column.disabled"
      :required="column.required"
      :style="column.detail ? 'pointer-events: none;' : ''"
      :rules="[{ required: column.required }]"
    >
      <template #input>
        <van-checkbox-group
                v-model="currentValue"
          :readonly="column.readonly"
          :disabled="column.disabled"
          :required="column.required"
          :style="column.detail ? 'pointer-events: none;' : ''"
          :direction="column.direction ? 'horizontal' : ''"
        >
          <van-checkbox
                  shape="square"
            v-for="(item, index) of column.dicData"
            :key="index"
            :name="item.value"
            style="padding-bottom: 6px; padding-right: 6px"
            >{{ item.label }}</van-checkbox>
        </van-checkbox-group>
      </template>
    </van-field>
  </div>
</template>

<script>
export default {
  name: "avant-checkbox",
  props: ['column','modelValue'],
  inject: ['getViewFormData'],
  data() {
    return {
      currentValue: [],
    };
  },
  mounted(){
    if( this.getViewFormData){
      this.formData = this.getViewFormData()
    }
  },


  watch: {
    currentValue(newVal) {
      this.$emit('update:modelValue', newVal.join());
    },
    modelValue: {
      handler(newVal, oldVal) {
        if(!newVal){
          return
        }
        if (Array.isArray(newVal)) {
          this.currentValue = newVal;
        } else {
          this.currentValue = newVal.split(",");
          //this.$emit('update:modelValue', JSON.parse(newVal));
        }
      },
      immediate: true // 确保初始化时也执行一次
    }
  },


  created() {

  },
  methods: {

  },
};

</script>

<style lang="scss" scoped>
:deep(.van-field__body) {
  float: right;
}
:deep(.van-field__control > div:first-child) {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
</style>
